<!doctype html>
<html class="ui-page-login">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
	</head>
	<style type="text/css">
		.mui-bar{
			height: 85px;
		}
		.mui-content{
			height: 100%;
			padding-top:86px !important;
			overflow: hidden;
		}
		.my-search{
			width: 80%;
			margin-left: 10%;
			margin-top: 20px;
		}
		.row-white{
			background-color: #FFFFFF;
			margin-bottom: 3px;
		}
		.content-left{
			background-color: #FFFFFF;
			height: 100%;
			margin-left: -10px;
			font-size: 12px;
			overflow: auto;
		}
		.content-left li{
			border-bottom: 1px solid #EEEEEE;
			height: 90px;
			line-height: 70px;
			text-align: center;
		}
		.content-left .mui-table-view-cell:after{
			height: 0px;
		}
		.content-right{
			background-color: #FFFFFF;
			height: 100%;
			margin-left: 10px;
			border-left:10px soild #EEEEEE ;
			font-size: 12px;
		}
		.my-row-height{
			height:100%;
		}
		.content-right li{
			border-bottom: 1px solid #EEEEEE;
			height: 120px;
			text-align: left;
		}
		.mui-table-view-cell:after{
			background-color: #ffffff;
		}
		.my-dragstart{
			position: absolute;
			bottom: 20px;
			width: 50px;
			right: 20px;
			text-align: center;
			z-index: 1111 !important;
		}
			.my-numbox{
			height: 30px;
			padding: 0px;
			width: 80px;
			font-weight: normal;
		}
		.my-numbox input{
			width: 40 !important;
		}
		.my-numbox button{
			padding: 0px !important;
			margin: 0px !important;
			width: 20px !important;
		}
		.my-f-red{
			color:red;
		}
		.my-h{
			height: 65px;
         	white-space:normal;
        	word-break:break-all;
        	word-wrap:break-word; 
		}
		.my-t-r{
			text-align: right;
		}
		.my-dragstart{
			position: absolute;
			bottom: 20px;
			width: 50px;
			right: 20px;
			text-align: center;
		}
		.m-f-35{
			font-size: 45px;
		}
		.m-bade-red{
			position: absolute;
			font-size: 12px;
			right: -7px;
		}
		.mui-table-view-cell{
			padding-right: 10px !important;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">自选</h1>
			<div class="mui-row row-white" style="z-index: 1111111;">
				<div class="mui-input-row mui-search my-search">
				    <input type="search" class="mui-input-clear" placeholder="请输入需要搜索的商品名称或关键字">
				</div>
			</div>
		</header>
		<div class="mui-content">
			<div class="mui-row my-row-height">
	           	<div class="mui-col-sm-3 mui-col-xs-3 content-left">
					<ul class="mui-table-view" id="classification" >
						
				    </ul>
				</div>
				<div class="mui-col-sm-9 mui-col-xs-9 content-right" id="refreshContainer">
					<div class="mui-scroll">
					    <!--数据列表-->
					    <ul class="mui-table-view mui-table-view-chevron" id="goodsList">
					    	<!--<li class="mui-table-view-cell">
					            <div class="mui-row">
					            	<div class="mui-col-sm-5 mui-col-xs-5">
					            		<img src="images/iconfont-tianjia.png" width="70" max-height="100" />
					            	</div>
					            	<div class="mui-col-sm-7 mui-col-xs-7">
					            		<div class="mui-col-sm-12 mui-col-xs-12 my-h">3</div>
					            		<div class="mui-row">
					            			<div class="mui-col-sm-6 mui-col-xs-6 my-f-red">1</div>
					            			<div class="mui-col-sm-6 mui-col-xs-6 my-t-r">
					            				<span class="mui-icon mui-icon-gear" style="font-size: 30px;" id="'+ goods_sn +'"></span>
					            		</div>
					            		</div>
					            	</div>
					           </div>
					        </li>-->
					    </ul>
				</div>
	        </div>
	        <div  id="myDragstart" class="my-dragstart">
				<span class="mui-badge mui-badge-danger m-bade-red" id="myDragstartNum">0</span>
				<span id="myDragstartBtn" class="mui-icon mui-icon-gear m-f-35">
					
				</span>
			</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/public.js"></script>
		<script src="js/app.js"></script>
		<script src="js/jquery-2.1.0.js"></script>
		<script>jQuery.noConflict()</script>
		<script type="text/javascript">
			var pager = {};//分页
   			var totalPage;//总页码  	
   			var state = app.getState();
			mui.init({
				beforeback: function(){
					//获得列表界面的webview
					var list = plus.webview.getWebviewById('main');
					console.log(list);
					//触发列表界面的自定义事件（refresh）,从而进行数据刷新
					mui.fire(list,'refreshHtml');
					//alert("333");
					//返回true，继续页面关闭逻辑
					return true;
				}
			});
			function getCss(e){
				var tap = document.getElementById('myDragstart');
				var resolutionHeight = plus.display.resolutionHeight;
	            var resolutionWidth = plus.display.resolutionWidth;
	            if(resolutionHeight - e.detail.center.y < 0){
					tap.style.bottom = "20px";			    		
		    	}else if(e.detail.center.y < 126){
		    		tap.style.bottom = resolutionHeight;
		    	}else{
		    		tap.style.bottom = resolutionHeight - e.detail.center.y +"px";
		    	}
		   	 	if(resolutionWidth - e.detail.center.x < 0){
		   	 		tap.style.right = "20px";
		   	 	}else if(resolutionWidth - e.detail.center.x > resolutionWidth - 55){
		   	 		
		   	 		tap.style.right = resolutionWidth - "80px";
		   	 	}else{
		   	 		tap.style.right = resolutionWidth - e.detail.center.x +"px";
		   	 	}
			}
			function pullRefresh(){
		      mui("#refreshContainer").pullRefresh({
		        up:{
		           contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
		           contentnomore:'没 有 更 多 数 据 了',//可选，请求完毕若没有更多数据时显示的提醒内容；
		           callback:function(){ 
		           		window.setTimeout(function(){
		           		 	getGoodsList();
		                },500);
		           	}
		         },
		        down:{
		             height:'50px',//可选,默认50px.下拉刷新控件的高度,
				     range:'100px', //可选 默认100px,控件可下拉拖拽的范围
				     offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
		             auto: true,//可选,默认false.首次加载自动下拉刷新一次
		             contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
		             contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
		             contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
		             callback:function(){ //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		                window.setTimeout(function(){
		                    pager['size']= 10;//条数
		               		pager['page'] = 1;//页码      
			                //刷新要先清空父节点里面的子节点
			                var f = document.getElementById("goodsList");
			                var childs = f.childNodes;
			                for(var i = childs.length - 1; i >= 0; i--) {
			                  f.removeChild(childs[i]);
			                }
			                getGoodsList();
		                },500);
		              }
		            }
		        })
		    } 
			function getGoodsLisCategory(obj){
				category_id = obj;
				pager['size']= 10;//条数
		        pager['page'] = 1;//页码 
				jQuery("#goodsList").empty();
				getGoodsList();
			}
			function getGoodsList(){
				if(category_id == "undefined"){
					var obj = "";
				}else{
					var obj = category_id;
				}
				mui.ajax({
					type:'POST',
					headers: {
						"device-udid":headers.device_udid,
					    "device-client":headers.device_client,
					    "device-code":headers.device_code,
					    "api-version":headers.api_version,
					},
					url: publicUrl +"/sites/api/?url=merchant/goods/list",
					dataType:"json",
					data:{"token":state.token,
						  "seller_id":state.seller_id,
						  "filter":{
						  	 "category_id":obj,
							 "keywords":"",
							 "sort_by":"",
						  },
						  "pagination":{
								"count":"10",
								"page":pager.page,
						  },
					},
					success:function(data){
						//console.log(JSON.stringify(data));
			 			var goods_sn="";
						
						if(data.status.succeed == 1){
							var html = '';
							for(var i=0; i<data.data.length;i++){
								//alert(goods_sn);
								html += '<li class="mui-table-view-cell">'
								            +'<div class="mui-row">'
								            	+'<div class="mui-col-sm-4 mui-col-xs-4">'
								            		+'<img src="images/iconfont-tianjia.png" width="70" max-height="100" />'
								            	+'</div>'
								            	+'<div class="mui-col-sm-8 mui-col-xs-8">'
								            		+'<div class="mui-col-sm-12 mui-col-xs-12 my-h">'+ data.data[i].name +'</div>'
								            		+'<div class="mui-row">'
								            			+'<div class="mui-col-sm-6 mui-col-xs-6 my-f-red">'+ data.data[i].shop_price +'</div>'
								            			+'<div class="mui-col-sm-6 mui-col-xs-6 my-t-r">'
								            				+'<span class="mui-icon mui-icon-gear" style="font-size: 30px;" id="'+ data.data[i].goods_sn +'"></span>'
								            			+'</div>'
								            		+'</div>'
								            	+'</div>'
								           +'</div>'
								        +'</li>'
							}
							jQuery("#goodsList").append(html);
							mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
						}
						//这里很重要，这里获取页码 公式：总条数/每页显示条数
			            totalPage = data.paginated.total%pager.size!=0?
			            parseInt(data.paginated.total/pager.size)+1:
			            data.paginated.total/pager.size;
			            if(totalPage == pager.page){//总页码等于当前页码，停止上拉下拉
			             	mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
			            }else{
			            	pager.page++;
			           		mui('#refreshContainer').pullRefresh().refresh(true);	
		               }   		                
					}
				})
			}
			function editGoods(id,user_id){
				for(var i=0; i<goods.length; i++){
					if(id == goods[i].goods_sn){
						var rec_id = parseInt(goods[i].rec_id);
					}
				}
				console.log(JSON.stringify(rec_id));
				mui.ajax({
					headers: {
						"device-udid":headers.device_udid,
					    "device-client":headers.device_client,
					    "device-code":headers.device_code,
					    "api-version":headers.api_version,
					},
					type:'POST',
					url: publicUrl +"/sites/api/?url=admin/flow/checkOrder",
					dataType:"json",
					data:{
						"token":state.token,
						"updategoods":{
							"rec_id":rec_id,
                    		"number":1
						},
						"user":{
	                       "user_id":user_id,
	                    }
					},
					success:function(data){
						var num =0;
						goods = [];
						if(data.status.succeed == 1){
							if(data.data.goods_list != null){
								for(var i=0; i<data.data.goods_list.length; i++){
									num += parseInt(data.data.goods_list[i].goods_number);
									var t = {"rec_id":data.data.goods_list[i].rec_id,"goods_sn":data.data.goods_list[i].goods_sn}
									goods.push(t);
								}
							}
						jQuery("#myDragstartNum").html(num);
						}else{
							alert(data.status.error_desc);
						}
					}
				})
			}
			function addGoods(id,user_id){
				mui.ajax({
					headers: {
						"device-udid":headers.device_udid,
					    "device-client":headers.device_client,
					    "device-code":headers.device_code,
					    "api-version":headers.api_version,
					},
					type:'POST',
					url: publicUrl +"/sites/api/?url=admin/flow/checkOrder",
					dataType:"json",
					data:{
						"token":state.token,
						"addgoods":{
							"goods_sn":id,
                    		"number":"1"
						},
						"user":{
	                       "user_id":user_id,
	                    }
					},
					success:function(data){
						var num =0;
						goods = [];
						if(data.status.succeed == 1){
							if(data.data.goods_list != null){
								for(var i=0; i<data.data.goods_list.length; i++){
									num += parseInt(data.data.goods_list[i].goods_number);
									var t = {"rec_id":data.data.goods_list[i].rec_id,"goods_sn":data.data.goods_list[i].goods_sn}
									goods.push(t);
								}
							}
						jQuery("#myDragstartNum").html(num);
						}else{
							alert(data.status.error_desc);
						}
					}
				})
			}
			function goodsListAdd(){
				var id = this.getAttribute("id");
				var user_id =  localStorage.getItem("telMember");//获取
				var tt = JSON.stringify(goods);
				var result1 = tt.indexOf(id); //返回index为2
				 addGoods(id,user_id);
			}
			mui.plusReady(function(){
				window.addEventListener('refreshHtml', function(e) {  
		            location.reload();  
		        }) 
				mui("#goodsList").on("tap","span",goodsListAdd);
				var user_id = localStorage.getItem("telMember");//获取
				var state = app.getState();
				var tap = document.getElementById('myDragstart');
				var myDragstartBtn = document.getElementById('myDragstartBtn');
				mui.ajax({
					headers: {
						"device-udid":headers.device_udid,
					    "device-client":headers.device_client,
					    "device-code":headers.device_code,
					    "api-version":headers.api_version,
					},
					type:'POST',
					url: publicUrl +"/sites/api/?url=admin/flow/checkOrder",
					dataType:"json",
					data:{
						"token":state.token,
						"user":{
	                       "user_id":user_id,
	                    }
					},
					success:function(data){
						var num = 0;
						goods = [];
						if(data.status.succeed == 1){
							if(data.data.goods_list != null){
								for(var i=0; i<data.data.goods_list.length; i++){
									num += parseInt(data.data.goods_list[i].goods_number);
									var t = {"rec_id":data.data.goods_list[i].rec_id,"goods_sn":data.data.goods_list[i].goods_sn}
									goods.push(t);
								}
							}
							jQuery("#myDragstartNum").html(num);
						}else{
							mui.toast(data.status.error_desc,{ duration:'long', type:'div' });
						}
					}
				})
				myDragstartBtn.addEventListener('tap', function(event) {
					if(jQuery('#myDragstartNum').text() <= 0){
						mui.toast("购物车为空！",{ duration:'long', type:'div' });
						return false;
					}
					mui.openWindow({
                        url: "shoppingCart.html",
                        id: "shoppingCart",
                        extras: {
                            goods: goods //同样，这里也只是个标识，实际开发中并不用；
                        }
                    });
				}, false);
				if(state.token){
					mui.ajax({
						headers: {
							"device-udid":headers.device_udid,
						    "device-client":headers.device_client,
						    "device-code":headers.device_code,
						    "api-version":headers.api_version,
						},
						type:'POST',
						url: publicUrl +"/sites/api/?url=merchant/goods/category",
						dataType:"json",
						data:{"token":state.token,"seller_id":state.seller_id},
						success:function(data){
							var html ='<li class="mui-table-view-cell" onclick="getGoodsLisCategory()">全部分类</li>';
							if(data.status.succeed == "1"){
								for(var i=0;i<data.data.length;i++){
									html += '<li class="mui-table-view-cell" onclick="getGoodsLisCategory('+ data.data[i].id +')">'+data.data[i].name+'</li>';
								}
								var div = document.getElementById("classification");
								div.innerHTML = "";
								div.innerHTML = html;
							} else {
								//return callback(data.status.error_desc);
							}	
						}
					})
				}
				tap.addEventListener('dragstart',function(e){
					getCss(e);
			    });	
			    tap.addEventListener('drag',function(e){
			    	getCss(e);
			    });
			    tap.addEventListener('dragend',function(e){
			    	getCss(e);
			    });		
				pullRefresh();
			})
		</script>
	</body>
</html>
